<div class="login-card">
  <div class="card-header">
    <h1>Login</h1>
  </div>
  <div class="card-body">
    <form>
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" id="username" name="username" required="">
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password" required="">
      </div>
      <div class="form-group">
        <button type="submit" class="login-button">Login</button>
      </div>
    </form>
  </div>
</div>

<style>
/* From Uiverse.io by ClawHack1 - Tags: login, card */
.login-card {
  background-color: #f8f8f8;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 20px;
  max-width: 400px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

.card-header {
  text-align: center;
  margin-bottom: 20px;
}

.card-header h1 {
  font-size: 2em;
  color: #333;
  text-shadow: 1px 1px #ddd;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  font-size: 1.2em;
  color: #555;
  margin-bottom: 10px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  border: none;
  background-color: #f0f0f0;
  font-size: 1.2em;
  color: #555;
  box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.3);
  outline: none;
}

input[type="submit"] {
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 1.2em;
  padding: 10px;
  transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
  background-color: #0069d9;
}

.login-button {
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 1.2em;
  padding: 10px;
  width: 100%;
  transition: background-color 0.3s ease;
  transition: 0.25s;
}

.login-button:hover {
  background-color: #0069d9e7;
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0,105,217,1);
  -moz-box-shadow: 0px 0px 30px 0px rgba(0,105,217,1);
  box-shadow: 0px 0px 30px 0px rgba(0,105,217,1);
}

</style>
